<template>
    <div>
        <!-- 弹层模板类型  -->
        <group>
        </group>
        <!-- 弹层模板 -->
        <div  class="shaiX">
            <popup v-model="$attrs.componentRelater" position="right" >
                <!-- 筛选顶部模板 -->
                <div class="  filterContent   filter_wrap_cate" style="display:none">
                    <div v-on:click="filterHeader()" class="filter_header filterHeader ">
                        全部分类
                        <icon class="wap_icon_back" name="left" scale="10"> </icon>
                    </div>
                    <div class="filter_item filterItem flex-item-1">
                        <ul class="filter_cate">
                            <!-- <h5 id="cateAll">全部 <i></i></h5> -->
                            <li v-for="dataFilter,index in dataFilters.cate">
                                <h5 v-on:click=" toggle(index)">{{dataFilter.cateName}}
                                <icon class="icon-menu-down" name="icon-menu-down" scale="10"></icon>
                                <!-- <icon class="icon-menu-up" name="icon-menu-up" scale="10"></icon> -->
                                </h5>
                                <div class="sub_cate" v-if='index==toggleIndex' v-show="hasShow">
                                    <ul>
                                        <h5 id="cateAll" v-on:click="cateAll(dataFilter.cateId,dataFilter.cateName ),filterHeader()">全部 <i></i></h5>
                                        <li v-if="items&& items.cateName" v-for=" items,index in dataFilter.subs">
                                            <h5 v-on:click=" toggleChild(index)">
                                              {{items.cateName}} 
                                              <icon class="icon-menu-down" name="icon-menu-down" scale="10">
                                              </icon>
                                            </h5>
                                            <ul class="sub_cate" v-if='index==toggleChildIndex' v-show="haveShow">
                                                <em v-on:click="itemCateAll(items.cateId,dataFilter.cateName,items.cateName),filterHeader()">全部</em>
                                                <li v-if="item && item.cateName" v-for="item in items.subs">
                                                  <span class="itemCateName" v-on:click="itemCateName(item.cateId,dataFilter.cateName,items.cateName,item.cateName),filterHeader()">{{item.cateName}}</span>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 筛选 品牌 价格 性别 {{dataFilter.name}}对应的模板渲染数据 -->
                <div class="v-transfer-tmp" id='transfer_tmp' style="display:none">
                    <ul>
                        <li v-if='dataFilter && dataFilter.name && index==filterIndex' v-for="(dataFilter,index) in dataFilters.others">
                            <h5 v-on:click="vTransferBanner()">
                                <icon class="wap_icon_back" name="left" scale="10"> </icon>
                              全部{{dataFilter.name}}
                            </h5>
                            <dl :class="`allDtSelected_${dataFilter.code}`">
                                <dt v-on:click="filterInfo(filter.code ,dataFilter.code),vTransferBanner()">全部</dt>
                                <dt :class="{activer:dataFilter.name&&filterCategory&&filterCategory.name==filter.name}" v-on:click="filterInfo(filter.code ,dataFilter.code),vTransferBanner(),filterSelectedAll($event,filter,filter.name,dataFilter.code,dataFilter.name,index)" v-if="filter && filter.name && index<29 " v-for="filter,index in dataFilter.value">
                                    {{filter.name}}
                                </dt>
                            </dl>
                        </li>
                    </ul>
                </div>
                <!-- 筛选初始页面默认的数据渲染 -->
                <div class="v-transfer-banner filter_wrap">
                    <div class="filter_wrap_header  ">
                        <p v-on:click="AllShow()">
                            分类
                            <label id="firstcategory"></label>
                            <icon class="wap_icon_forward" name="right" scale="10"> </icon>
                            <em>全部</em>
                        </p>
                    </div>
                      <!-- <label v-if="itemName[0]==filter.name">{{itemName[0]}} </label> -->
                           <!-- <label id="category" v-if='filterCategory&&filterCategory.name'>{{filterCategory.name}}</label> -->
                     <!-- :class="`dtSelected_${dataFilter.code}`" ,activer:dataFilter.name&&itemName[0]==dataFilter.name -->
                    <ul class="v-transfer-info" id='transfer'>
                        <li v-if='dataFilter && dataFilter.name' v-for="dataFilter,filterIndex in dataFilters.others">
                            <h5 v-on:click="filter_wrap_banner(filterIndex)" :class="'filter_'+dataFilter.code">
                           {{dataFilter.name}}
                           <!--  -->
                           <label id="category" :class="`dtSelected itemSelected_${dataFilter.code}`"> </label>
                           <icon class="wap_icon_forward" name="right" scale="10"> </icon>
                           <em>全部</em>
                           </h5>
                           <!-- :class="{activer:dataFilter.name&&filterCategory&&filterCategory.name==filter.name}" -->
                            <dl :class="`dtSelected_${dataFilter.code}`" v-on:click="dlSelected($event)">
                                <dt class="dtActiver" v-on:click="filterInfo(filter.code ,dataFilter.code),filterSelected($event,filter,filter.name,dataFilter.code,dataFilter.name,index)" v-if='filter && filter.name && index<5' v-for='filter,index in dataFilter.value'>
                                    {{filter.name}}
                                </dt>
                            </dl>
                        </li>
                    </ul>
                    <div class="choose">
                        <span v-on:click="filter(), reset(resetHtml,dataFiltertest,filtertest)">重置</span>
                        <span v-on:click="onFilter() ,filterOk(dataFiltertest,filtertest)">确定</span>
                    </div>
                </div>
            </popup>
        </div>
    </div>
</template>

<style scoped>
  @import './../css/searchFilter.css'
</style>
<script>

import {
    TransferDom,
    Popup,
    Group,
    XSwitch,
    XImg
} from 'vux'; 
 
var config = window.config;
// var lists= [];
export default {
    name: 'searchFilter',
    components: {
        TransferDom,
        Popup,
        Group,
        XSwitch,
        XImg,
    },
    directives: {
        TransferDom
    },
    data() {
        return {
            show: false, //transferDOM
            dataFilters: [], //第二次返回筛选数据
            hasShow: false,
            haveShow: false,
            filterIndex: '',
            toggleIndex: '',
            toggleChildIndex: '',
            check: '',
            dataFiltertest: '',
            filtertest: '',
            nowIndex: null,
            current: '0',
            filterCategory: null,
            itemName:[],
            lists:[],
            hasTure:false,
            resetHtml:''
        }
    },
    mounted() {
        this.filter();
    },
    methods: {
        // 筛选弹层
        onFilter() {
            this.$emit("componentCon");
        },
         
        //点击筛选框第一级 全部分类显示;
        AllShow() {
            var filterWrap = document.querySelector('.filter_wrap');
            filterWrap.style.display = 'none';
            document.querySelector('.filter_wrap_cate').style.display = 'block';
        },
        //点击选中显示;
       
         dlSelected(event){
             event.target.classList.add("activer")
            // event.target.setAttribute("class","activer"); 
         },
         filterSelectedAll(event,filter, filterName, filterCode, dataFilterName,index){
            var filterClass = '.itemSelected_' + filterCode;
            this.resetHtml = filterClass;
            document.querySelector(filterClass).innerHTML = filterName;

            //根据返回的子集元素;来激活 全部 分类中  如 品牌 价格  性别 的类名;
            this.filterCategory=filter;

            // var filterClassDt = '.allDtSelected_' + filterCode;  
            // document.querySelector(filterClassDt).childNodes[index+1].classList.add("activer");
            // var dt = document.querySelector(filterClassDt).childNodes[index+1];
            // function siblings(dt) {
            //     var a = [];
            //     var p = dt.parentNode.children;
            //     for(var i =0,pl= p.length;i<pl;i++) {
            //     if(p[i] !== dt) a.push(p[i]);
            //     }
            //     return a;
            // }
            // var dtArr = siblings(dt)
            // for(var j=0; j<dtArr.length;j++){
            //     dtArr[j].className=''
            // }
         },     
        filterSelected(event,filter, filterName, filterCode, dataFilterName,index) {
            var filterClass = '.itemSelected_' + filterCode;
            this.resetHtml = filterClass;
            document.querySelector(filterClass).innerHTML = filterName;
            //根据返回的子集元素; 作为判断 label标签的 选中显示 项
            this.filterCategory=filter;
            // console.log('1111111')
            var filterClassDt = '.dtSelected_' + filterCode;  
            // console.log(document.querySelector(filterClassDt));
            // document.querySelector(filterClassDt).childNodes[index].className='activer';
            // console.log(document.querySelector(filterClassDt).childNodes[index]);
            // this.hasTure= !this.hasTure
            // 选中当前高亮
            // event.target.setAttribute("class","activer"); 
            // console.log(event.target.innerHTML)
            
            var dt = document.querySelector(filterClassDt).childNodes[index];
             function siblings(dt) {
                var a = [];
                var p = dt.parentNode.children;
                for(var i =0,pl= p.length;i<pl;i++) {
                if(p[i] !== dt) a.push(p[i]);
                }
                return a;
            }
            var dtArr = siblings(dt)
            for(var j=0; j<dtArr.length;j++){
                dtArr[j].className='dtActiver'
            }
            console.log(siblings(dt));

            // 获取当前子元素所对应的父级 没有效果??
            
            // this.dataFilterName = dataFilterName;
            // var itemName = [];
            // for(var i=0; i<this.dataFilterName.length;i++){
            //     if(itemName.indexOf(this.dataFilterName)==-1){
            //     itemName.push(this.dataFilterName);
            //     }
            // }
            //  this.itemName = itemName;
             // console.log(this.itemName);
             // console.log(this.itemName[0]);
        },
        //点击 筛选框 品牌 价格 性别类 显示全部
        filter_wrap_banner(num) {
            document.querySelector('.filter_wrap').style.display = 'none';
            var vTransferTmp = document.querySelector('.v-transfer-tmp');
            vTransferTmp.style.display = 'block';
            this.filterIndex = num;
        },
        //点击 筛选框  品牌 价格 性别   隐藏全部   
        vTransferBanner(){
            document.querySelector('.filter_wrap').style.display = 'block';
            var vTransferTmp = document.querySelector('.v-transfer-tmp');
            vTransferTmp.style.display = 'none';
        },
        // 点击 筛选框 全部分类 de显示隐藏 
        filterHeader() {
            document.querySelector('.filter_wrap_cate').style.display = 'none';
            var filterWrap = document.querySelector('.filter_wrap');
            filterWrap.style.display = 'block';
        },
        // 点击 全部分类中  男装 女装 儿童的显示隐藏
        toggle(toggleIndex) {
            this.toggleIndex = toggleIndex;
            this.hasShow = !this.hasShow;
        },
        // 点击 全部分类中  男装==>下的子类(T恤 衬衫 裤装 ) 女装 儿童的显示隐藏
        toggleChild(toggleChildIndex) {
            this.toggleChildIndex = toggleChildIndex;
            this.haveShow = !this.haveShow;
        },

        //筛选功能获取数据 发送请求;
        filter() {
            var getFilterInfo = window.config.interface.getFilterInfo + 'a_a_a_a_a_a_a_a_a_a_a_a.shtml?ts=&discountRate=a&word=&';
            this.$http.get(getFilterInfo).then(
                function(response) {
                    // 这里是处理正确的回调
                    // 返回整个数据; 在v-for item in items. 在items中通过 . 的方式可以对象中的数据;
                    this.dataFilters = response.data.data;
                    // console.log( this.dataFilters);
                },
                function(response) {
                    // 这里是处理错误的回调
                    console.log(response)
                }
            )
        },
        // 筛选功能 品牌 价格 尺寸 元素;根据元素信息发送请求;
        filterInfo(param, code) {
            this.dataFiltertest = code
            this.filtertest = param;
            var searchParam = {};
            searchParam[code] = param;
            //格式化 请求数据参数;
            if (typeof(searchParam) == 'undefined') return;
            var paramList = '';
            var filterList = '';
            var arrFilter = config['arrFilter'];
            var attrParam = new Array();
            for (var i in searchParam) {
                if (i == 'undefined' || typeof(searchParam[i]) == 'undefined' || searchParam[i].indexOf('clear') != -1) continue;
                //console.log(searchParam[i]);
                if (i.indexOf('attr') != -1) { //该判断不走
                    attrParam.push(searchParam[i]);
                    delete searchParam[i];
                    continue;
                }
                if (typeof(config['arrFilter'][i]) != 'undefined') {
                    arrFilter[i] = searchParam[i];
                    delete searchParam[i];
                    continue;
                }
                paramList += i + "=" + searchParam[i] + "&";
            };
            for (var i in arrFilter) {
                if (i == 'stock') {
                    filterList += arrFilter[i];
                    break;
                }
                filterList += arrFilter[i] + "_";
            };
            attrParam != '' ? filterList += ("_" + attrParam.join('_')) : '';
            var getFilterInfo = window.config.interface.getFilterInfo + filterList + '.shtml?ts=&discountRate=a&word=&';
            this.$http.get(getFilterInfo).then(
                function(response) {
                    this.dataFilters = response.data.data;
                },
                function(response) {
                    // 这里是处理错误的回调
                    console.log(response)
                }
            )
            filterList = '';
            paramList = '';
        },
        cateAll(dataFilterCateId,cate1){
          //全部分类中 '男装 女装...'的  全部  按钮返回的数据
          var cateParam = {};
          var b = 'cid';
          cateParam[b]= String(dataFilterCateId);
            if (typeof(cateParam) == 'undefined') return;
            var paramList = '';
            var filterList = '';
            var arrFilter = config['arrFilter'];
            var attrParam = new Array();
            for (var i in cateParam) {
                if (i == 'undefined' || typeof(cateParam[i]) == 'undefined' || cateParam[i].indexOf('clear') != -1) continue;
                if (i.indexOf('attr') != -1) { //该判断不走
                    attrParam.push(cateParam[i]);
                    delete cateParam[i];
                    continue;
                }
                if (typeof(config['arrFilter'][i]) != 'undefined') {
                    arrFilter[i] = cateParam[i];
                    delete cateParam[i];
                    continue;
                }
                paramList += i + "=" + cateParam[i] + "&";
            };
            for (var i in arrFilter) {
                if (i == 'stock') {
                    filterList += arrFilter[i];
                    break;
                }
                filterList += arrFilter[i] + "_";
            };
            attrParam != '' ? filterList += ("_" + attrParam.join('_')) : '';
          var getFilterInfo = window.config.interface.getFilterInfo + filterList + '.shtml?ts=&discountRate=a&word=&';
            this.$http.get(getFilterInfo).then(
                function(response) {
                    this.dataFilters = response.data.data;
                },
                function(response) {
                    // 这里是处理错误的回调
                    console.log(response)
                }
            )
            var cateHtml=cate1
            document.querySelector('#firstcategory').innerHTML=cateHtml;
        },
        itemCateAll(itemsCateId,cate1,cate2){
          //全部分类中 'T桖 衬衫...'的  全部  按钮返回的数据
            var cateParam = {};
          var b = 'cid';
          cateParam[b]= String(itemsCateId);
            if (typeof(cateParam) == 'undefined') return;
            var paramList = '';
            var filterList = '';
            var arrFilter = config['arrFilter'];
            var attrParam = new Array();
            for (var i in cateParam) {
                if (i == 'undefined' || typeof(cateParam[i]) == 'undefined' || cateParam[i].indexOf('clear') != -1) continue;
                if (i.indexOf('attr') != -1) { //该判断不走
                    attrParam.push(cateParam[i]);
                    delete cateParam[i];
                    continue;
                }
                if (typeof(config['arrFilter'][i]) != 'undefined') {
                    arrFilter[i] = cateParam[i];
                    delete cateParam[i];
                    continue;
                }
                paramList += i + "=" + cateParam[i] + "&";
            };
            for (var i in arrFilter) {
                if (i == 'stock') {
                    filterList += arrFilter[i];
                    break;
                }
                filterList += arrFilter[i] + "_";
            };
            attrParam != '' ? filterList += ("_" + attrParam.join('_')) : '';
          var getFilterInfo = window.config.interface.getFilterInfo + filterList + '.shtml?ts=&discountRate=a&word=&';
            this.$http.get(getFilterInfo).then(
                function(response) {
                    this.dataFilters = response.data.data;
                },
                function(response) {
                    // 这里是处理错误的回调
                    console.log(response)
                }
            )
            
            var cateHtml=cate1+'/'+cate2 
            document.querySelector('#firstcategory').innerHTML=cateHtml;
        },
        itemCateName(itemCateId,cate1,cate2,cate3){
            //全部分类中 'T桖 衬衫...'下的子集的  全部  按钮返回的数据
          var cateParam = {};
          var b = 'cid';
          cateParam[b]= String(itemCateId);
            if (typeof(cateParam) == 'undefined') return;
            var paramList = '';
            var filterList = '';
            var arrFilter = config['arrFilter'];
            var attrParam = new Array();
            for (var i in cateParam) {
                if (i == 'undefined' || typeof(cateParam[i]) == 'undefined' || cateParam[i].indexOf('clear') != -1) continue;
                if (i.indexOf('attr') != -1) { //该判断不走
                    attrParam.push(cateParam[i]);
                    delete cateParam[i];
                    continue;
                }
                if (typeof(config['arrFilter'][i]) != 'undefined') {
                    arrFilter[i] = cateParam[i];
                    delete cateParam[i];
                    continue;
                }
                paramList += i + "=" + cateParam[i] + "&";
            };
            for (var i in arrFilter) {
                if (i == 'stock') {
                    filterList += arrFilter[i];
                    break;
                }
                filterList += arrFilter[i] + "_";
            };
            attrParam != '' ? filterList += ("_" + attrParam.join('_')) : '';
          var getFilterInfo = window.config.interface.getFilterInfo + filterList + '.shtml?ts=&discountRate=a&word=&';
            this.$http.get(getFilterInfo).then(
                function(response) {
                    this.dataFilters = response.data.data;
                },
                function(response) {
                    // 这里是处理错误的回调
                    console.log(response)
                }
            )
            
            var cateHtml=cate1+'/'+cate2+'/'+cate3
            document.querySelector('#firstcategory').innerHTML=cateHtml;
        },
        //筛选功能 确定按钮;
        filterOk(param,code) {
            var searchParam = {};
            searchParam[code] = String(param);
            //格式化 请求数据参数;
            if (typeof(searchParam) == 'undefined') return;
            var paramList = '';
            var filterList = '';
            var arrFilter = config['arrFilter'];
            var attrParam = new Array();
            for (var i in searchParam) {
                if (i == 'undefined' || typeof(searchParam[i]) == 'undefined' || searchParam[i].indexOf('clear') != -1) continue;
                //console.log(searchParam[i]);
                if (i.indexOf('attr') != -1) { //该判断不走
                    attrParam.push(searchParam[i]);
                    delete searchParam[i];
                    continue;
                }
                if (typeof(config['arrFilter'][i]) != 'undefined') {
                    arrFilter[i] = searchParam[i];
                    delete searchParam[i];
                    continue;
                }
                paramList += i + "=" + searchParam[i] + "&";
            };
            for (var i in arrFilter) {
                if (i == 'stock') {
                    filterList += arrFilter[i];
                    break;
                }
                filterList += arrFilter[i] + "_";
            };
             // console.log(filterList)
             // var getSearchGoods = window.config.interface.getSearchGoods + filterList + '?ts=&discountRate=a&word=&' + page;
            // 　　　　'index.php/search/get-search-goods/a_a_a_a_a_a_a_3_-1_a_a_a.shtml'
            this.$http.get('index.php/search/get-search-goods/a_a_a_a_a_a_a_3_-1_a_a_a.shtml').then(response => {
                
                this.lists = response.data.data.list;
            // console.log(this.lists)
            
            // 添加地址栏后面参数
                // this.$router.push({
                //     path:'searchList',
                //     query:{
                //          ta: this.lists
                //     }
                // })
                 
            }, response => {
                // error callback
                // this.isShow = false
            });
            console.log(this.lists)
            
            // var bus = new Vue()
            // 触发组件 A 中的事件
            // bus.$emit('id-selected', 1)
             
        },
        reset(resetHtml,dataFiltertest, filtertest) {
        //筛选功能 重置按钮;
            this.dataFiltertest = dataFiltertest
            this.filtertest = filtertest
            this.dataFiltertest = '';
            this.filtertest = '';
            for(var i = 0; i<document.querySelectorAll('.dtSelected').length;i++){
                document.querySelectorAll('.dtSelected')[i].innerHTML='';
            }
            for(var j = 0; j<document.querySelectorAll('.dtActiver').length;j++){
                document.querySelectorAll('.dtActiver')[j].className='dtActiver';
            }
            // console.log(this.resetHtml)
            console.log(dataFiltertest);
            console.log(filtertest);

        }
       
    },
    activated() {
        
    }
 
}
</script>
